<template>
  <div class="form-data-list">
    <ul>
      <li v-for="(item, index) in getItems" :key="index">
        <el-button @click.stop="onGetExportData(item)">{{
          item.start + "-" + item.end + "条数据"
        }}</el-button>
      </li>
    </ul>
    <iframe src="" ref="iframe"></iframe>
  </div>
</template>

<script setup lang="ts">
import { useWebDataAnalysisStore } from "@/store/web/data-analysis";
let limit = 50000;
const useWebDataAnalysis = useWebDataAnalysisStore();
const exportData = computed(() => {
  return useWebDataAnalysis.exportData;
});
const iframe = ref<HTMLIFrameElement>();
const getItems = computed(() => {
  let items: any = [];
  let num = Math.ceil(exportData.value.total / limit);
  _.times(num, (index) => {
    let obj: any = {};
    obj.start = index * limit;
    obj.end = (index + 1) * limit;
    items.push(obj);
  });
  return items;
});

const onGetExportData = (item) => {
  iframe.value!.src =
    import.meta.env.VITE_APP_API_URL +
    "/stat/expdata?site_id=" +
    exportData.value.site_id +
    "&table=com_form&start=" +
    item.start +
    "&limit=" +
    limit +
    "";
};
</script>

<style lang="scss" scoped>
.form-data-list {
  margin: 30px 0;
  box-shadow: 0 2px 4px rgba(18, 123, 255, 0.1);

  li {
    display: inline-block;
    margin: 10px;
  }
  .form-data-textarea {
    width: 96%;
    margin: 20px;
  }
  .form-data-textarea textarea {
    min-height: 500px;
  }
  iframe {
    display: none;
  }
}
</style>
